<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Vue和Element UI JS -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }
        .app-container {
            display: flex;
            height: 100vh;
        }
        .sidebar-container {
            width: 220px;
            height: 100%;
            background-color: #304156;
            color: #bfcbd9;
            overflow-y: auto;
        }
        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .navbar {
            height: 50px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .app-main {
            flex: 1;
            padding: 0;
            overflow-y: auto;
            background-color: #f0f2f5;
            position: relative;
        }
        .logo {
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .el-menu {
            border-right: none;
        }
        .el-menu-item, .el-submenu__title {
            color: #bfcbd9;
        }
        .el-menu-item:hover, .el-submenu__title:hover {
            background-color: #263445 !important;
        }
        .el-menu-item.is-active {
            color: #409EFF;
            background-color: #263445 !important;
        }
        .user-info {
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .iframe-container {
            width: 100%;
            height: calc(100vh - 50px);
            border: none;
        }

        /* 统一表格样式 */
        .content-container {
            padding: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar-container {
                width: 64px;
            }
            .logo span {
                display: none;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <!-- 侧边栏菜单 -->
        <div class="sidebar-container">
            <div class="logo">管理系统</div>
            <el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical"
                    background-color="#304156"
                    text-color="#bfcbd9"
                    active-text-color="#409EFF"
                    :unique-opened="true"
                    :collapse="false"
                    mode="vertical"
                    @select="handleMenuSelect">

                <!-- 权限管理菜单 -->
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-lock"></i>
                        <span>权限管理</span>
                    </template>
                    <el-menu-item index="/user">用户管理</el-menu-item>
                    <el-menu-item index="/role">角色管理</el-menu-item>
                    <el-menu-item index="/menu">菜单管理</el-menu-item>
                </el-submenu>

                <!-- 学生管理菜单 -->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>学生管理</span>
                    </template>
                    <el-menu-item index="/student">学生列表</el-menu-item>
                    <el-menu-item index="/course">课程管理</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <!-- 主内容区 -->
        <div class="main-container">
            <!-- 顶部导航栏 -->
            <div class="navbar">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
                </el-breadcrumb>

                <div class="user-info">
                    <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
                    <el-dropdown>
                            <span class="el-dropdown-link">
                                管理员<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="app-main">
                <!-- 角色管理页面 -->
                <iframe v-if="activeMenu === '/role'"
                        :src="roleIframeSrc"
                        class="iframe-container"></iframe>

                <!-- 用户管理页面 -->
                <iframe v-if="activeMenu === '/user'"
                        :src="userIframeSrc"
                        class="iframe-container"></iframe>
                 <!-- 学生管理页面 -->
                <iframe v-if="activeMenu === '/student'"
                        :src="studentIframeSrc"
                        class="iframe-container"></iframe>
                <!-- 课程管理页面 -->
                <iframe v-if="activeMenu === '/course'"
                        :src="courseIframeSrc"
                        class="iframe-container"></iframe>
                <!-- 其他页面内容 -->
                <div v-else class="content-container">
                    <h2>{{ currentPageTitle }}</h2>
                    <p>这里是{{ currentPageTitle }}的内容区域</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeMenu: '/user', // 默认激活用户管理
                currentPageTitle: '用户管理',
                userIframeSrc: 'userm.html', // 用户管理页面路径
                roleIframeSrc: 'rolelist.html',// 角色管理页面路径
                studentIframeSrc:'studentlist.html', // 学生管理页面路径
                courseIframeSrc: 'courselist.html', // 课程管理页面路径


            }
        },
        methods: {
            // 菜单选择处理
            handleMenuSelect(index) {
                this.activeMenu = index;

                // 根据选择的菜单更新页面标题
                switch(index) {
                    case '/user':
                        this.currentPageTitle = '用户管理';
                        break;
                    case '/role':
                        this.currentPageTitle = '角色管理';
                        break;
                    case '/menu':
                        this.currentPageTitle = '菜单管理';
                        break;
                    case '/student':
                        this.currentPageTitle = '学生列表';
                        break;
                    case '/course':
                        this.currentPageTitle = '课程管理';
                        break;
                    default:
                        this.currentPageTitle = '首页';
                }
            }
        }
    });
</script>
</body>
</html>